<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      /* 每个li上下留一倍字体高度的长度 左右间隔0 */
      margin: 1em 0;
      /* li元素的下边框 k宽度1像素 样式 dashed 颜色... */
      border-bottom: 3px dashed #ccc;
      /* 行盒  高度 */
      line-height: 2;
      border-left: 3px solid 008c8c;
      /* 填充区左边长度 8像素 */
      padding-left: 8px;
      /* 当前元素的内容盒宽度 */
      width: 200px;
      /* 空白字符的处理还是会折叠 但是不会换行 */
      white-space: nowrap;
      /* 超出部分 隐藏 */
      overflow: hidden;
      /* 文字超出部分 为省略号(圆点) */
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <ul>
    <li>Lorem ipsum dolor sit amet consectetur.</li>
    <li>Hic quas beatae sint perferendis sunt!</li>
    <li>Blanditiis natus dolor non doloremque amet?</li>
    <li>Ipsam quibusdam exercitationem nesciunt nihil sequi.</li>
    <li>Eos nesciunt obcaecati expedita a quibusdam.</li>
    <li>Quod autem corporis distinctio! Enim, quibusdam!</li>
    <li>A labore ipsam tempore culpa. Dolores?</li>
    <li>Modi in libero suscipit aperiam quaerat.</li>
    <li>Nostrum consequuntur ea laborum possimus tempora!</li>
    <li>Aperiam odio maiores enim magni nesciunt.</li>
  </ul>
</body>

</html>